<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优衣库</title>
</head>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<style>
    #t1,#t2,#t3,#t4,#f1,#f2,#f3,#f4{margin-left:165px;position: absolute;z-index: 10;margin-top: -20px}
    a:link,a:visited{
        text-decoration: none;
    }
    .false,.true{
        display:none;
    }
    #first{
        height: 29px;
        background: #eeeeee;
    }
    #second_one{
        font-size: 5px;
        margin-top: -22px;

    }
    .ll3{
        margin-left: 600px;
    }
    #third{

        background: url(taobao_03.jpg) no-repeat;
        width: 214px;
        height: 63px;
        margin-top: 15px;
    }
    #fourth{
        margin-top: -60px;
    }
    #input{
        width: 500px;
        height: 32px;
        margin-left: 355px;
        border-color:sandybrown ;
        outline: none;
    }
    #submit{
        margin-left: -8px;
        cursor: pointer;
        width: 100px;
        height: 38px;
        font-weight: normal;
        color: black;
        background: sandybrown;
        font-size: 16px;
        font-family: Arial;
        cursor: pointer;
        padding: 0;
        border: 0;
        outline: none;
    }

    #fifth{
        font-size: 5px;
        margin-left: 400px;
        margin-top: 10px;
    }

    #six_b{
        margin-top: 25px;
    }
    #six_one{
        color: darkorange;

    }
    #fourth{
        margin-top: 100px;
        margin-left: 400px;
    }
</style>


<body style="width: 960px;margin:0 auto">
<div id="first"></div>
<div id="second">
    <form id="second_one">
        <il class="ll1">&nbsp;&nbsp;&nbsp;<a href="denglu.html" target="_blank"></a>&nbsp;&nbsp;</il>
        <il class="ll2"><a href="zhuce.html" target="_blank">免费注册</a></il>
        <il class="ll3"><a href="zhuye.html">优衣库首页</a>&nbsp;&nbsp;&nbsp;&nbsp;</il>
        <il class="ll4">我的购物车&nbsp;&nbsp;&nbsp;&nbsp;</il>
        <il class="ll5"><a href="zhuye.html">退出</a></il>
    </form>
</div>
<div id="third"></div>
<div id="fourth">
    <form action="/insertuser" method="post">
        <input  type="text" name="name" onblur="show1()" id="name" placeholder="昵称"><img id="f1" class="false" src="false.png" width="14" height="14" ><img id="t1" class="true" src="true.png" width="14" height="14" ><br>
        <input type="text" name="phone" onblur="check1()" maxlength="11" id="phone" placeholder="手机号" ><img id="f2" class="false" src="false.png" width="14" height="14" ><img id="t2" class="true" src="true.png" width="14" height="14" ><br>
        <input type="password" name="password" onblur="show2()" id="password" maxlength="16" placeholder="密码"><img id="f3" class="false" src="false.png" width="14" height="14" ><img id="t3" class="true" src="true.png" width="14" height="14" ><br>
        <input type="password" name="rpassword" onblur="check2()" id="rpassword" maxlength="16" placeholder="确认密码"><img id="f4" class="false" src="false.png" width="14" height="14" ><img id="t4" class="true" src="true.png" width="14" height="14" ><br>
        <div>
            <input type="checkbox" checked="checked" disabled="disabled" value=""><span>已阅读并同意<a href="#"><span class="lan">《XXXXX使用协议》</span></a></span>
        </div>
        <input id="zhuce" type="submit" name="注册" onclick="return panduan();" class="btn_zhuce" value="注册">

    </form>

</div>

</body>
<script type="text/javascript">
    //    window.onload=function () {
    //        var inputtext =document.getElementById("name")
    //        var xhr = new XMLHttpRequest()
    //        var str = "";
    //        inputtext.onkeyup = function () {
    //            xhr.open("post","/select")
    //            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    //            xhr.send("str="+inputtext.value)
    //        }
    //        inputtext.onreadystatechange = function () {
    //            if (xhr.readyState==4)
    //                div.innerHTML = xhr.responseText
    //            else
    //                div.innerHTML = "";
    //
    //        }
    //
    //
    //
    //        var email = document.getElementById("email")
    //        var password = document.getElementById("password")
    //        var rpassword = document.getElementById("rpassword")
    //
    //
    //
    //    }
    function panduan() {
        var phone = document.getElementById("phone").value
        var zzp = /^1[3,5,6,7,8]\d{9,18}$/
        var password = document.getElementById("password").value
        var rpassword = document.getElementById("rpassword").value
        if ((zzp.test(phone))&&password ==rpassword&&password!=""){
            return true
        }else{
            return false
        }
    }

        function check1() {
            var phone = document.getElementById("phone").value
            var zzp = /^1[3,5,6,7,8][0-9]{9}$/
            if (!(zzp.test(phone))) {
                f2.style.display = "block"
                t2.style.display = "none"
            }
            else {
                f2.style.display = "none"
                t2.style.display = "block"
            }
        }

        function check2() {
            var password = document.getElementById("password").value
            var rpassword = document.getElementById("rpassword").value
            if (password != rpassword || password == "") {
                f4.style.display = "block"
                t4.style.display = "none"
            } else {
                f4.style.display = "none"
                t4.style.display = "block"
            }

        }

        function show1() {
            var name = document.getElementById("name").value
            if(name==""){
                t1.style.display = "none"
                f1.style.display = "block"
            }else{
                t1.style.display = "block"
                f1.style.display = "none"
            }
        }

        function show2() {
            var password = document.getElementById("password").value
            if (password != "") {
                t3.style.display = "block"
                f3.style.display = "none"
            } else {
                t3.style.display = "none"
                f3.style.display = "block"
            }
        }

</script>
</html>